<template>
  <div class="kill-box">
    <ul class="title_wrap">
      <li>
        <span>嗨购秒杀</span>
        <span>18点场</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </li>
      <li>
        爆款轮番秒<van-icon name="play-circle" />
      </li>
    </ul>
    <ul class="seckillList">
      <li v-for="item in goodslist" :key="item.proid" @click="goGoodsDetail(item.proid)">
        <img :src="item.img1"/>
        <p>¥{{item.originprice}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from "axios";
export default {
  name: "SecondsKill",
  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      goodslist:[]
    };
  },
  created(){
      axios({
        url: "/api/pro/seckilllist",
        params: {
          limitNum: 6
        },       
      })
      .then(res=>{
        if (res.data.code == 200) {
            this.goodslist = res.data.data;   
          }
      })
      .catch(err=>{
        console.log("err",err);
      })
    },
  methods: {

    goGoodsDetail(id){
      this.$router.push("/GoodsDetail/"+id);
    }
  },
};
</script>
<style scoped>
.kill-box {
  width: 96%;
  height: 8rem;
  background-color: #fff;
  border-radius: 0.75rem;
  margin: 10px 2%;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 0.5rem;
}
.title_wrap {
  width: 100%;
  height: 2.5rem;
  background: url()
    no-repeat center center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: .8rem;
}
.title_wrap li:nth-child(1) {
  flex: 3;
  display: flex;
  margin-top: 0.6rem;
}
.title_wrap li:nth-child(1)>span {
    margin-right: 10px;
}
.title_wrap li:nth-child(1)>span:nth-child(2) {
    color: #f66;
}
.title_wrap  li:nth-child(2) {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    font-size: .8rem;
    color: #f66;
  margin-top: 0.6rem;
}
 .seckillList {
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 0.1rem;
}
.seckillList li {
    float: left;
    width: 16.6666666667%;
    height: 4.5rem;
    /* background-color: #ee0a24; */
    text-align: center;
}
.seckillList li img{
  height: 70%;
}
.seckillList li p{
  color: #ee0a24;
  margin-top: .5rem;
  font-size: .8rem;
}
</style>

